<!DOCTYPE HTML>
<html>
<head>
	<title>Home</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<script src="js/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" href="css/login.css">
	<script src="js/modernizr.custom.js"></script>
	<link rel="stylesheet" href="css/SitesList.css">
	<link rel="stylesheet" href="css/search_bar.css">
	<link rel="stylesheet" href="css/site-add.css">
	<script src="js/vue-2.6.10.js"></script>
	<script src="js/axios.min.js"></script>

</head>
<body>   
	 <div class="container">
		<div class="header">
					<div class="logo">
						<a href="index.html"><img src="images/logo.png" alt="" /></a>
					</div>
				</div>								
			<div id="bl-main" class="bl-main">
				<!----- Blog Page ----------------->
				<section>
					<div class="bl-box">
						<h2>收藏</h2>
					</div>
					<div class="bl-content" id="search-bar-parent">
						<div id="sites_data">
							<div id="search-bar">
								<input type="text" placeholder="请输入关键词" v-model="loadDatas.keyWords"> <input type="button" value="搜  索" class="button" @click="searchStart">
								<button class="button" id="openAddEditPage" v-show="addEditDel">添加</button>
								<button class="button" @click="showAllSites">显示全部</button>
								<select name="site_type" id="site_type" v-model="loadDatas.typeId" @change="searchStart">
									<!--<option value="all" class="type">全部</option>-->
									<option v-for="siteType in site_types" :value="siteType.id" :key="siteType.id" class="type">{{siteType.type}}</option>

								</select>


							</div>
							<div class="wrap" style="padding-top: 10px">
	    					<!--<h2>My Blog</h2>-->
	    					<div class="blog-leftgrids" v-for="(site, index) in loadDatas.sites" :key="site.id">

								<div class="image group">
									<div class="grid blog-desc">
										<h4><a :href="site.site" target="_blank">{{site.title}}</a></h4>
										<p>{{site.description}}</p>
									</div>
								</div>
								<div class="artical-links">
									<ul>
										<li><a href="javascript:void(0)"><span>{{site.siteType.type}}</span></a></li>
										<li><a href="javascript:void(0)"><span v-text="formatDate(new Date(site.editTime))"></span></a></li>
										<li><a href="javascript:void(0)"><span>{{site.user.username}}</span></a></li>
										<li  v-show="addEditDel"><a href="#" @click="deleteRecord(site.id)"><span>删除</span></a></li>
										<li  v-show="addEditDel"><a href="#" @click="getWebsitesById(site.id)"><span>修改</span></a></li>
									</ul>
								</div>

							</div>

							<div class="content-pagenation" id="pages-bar" v-if="loadDatas.pb!=null">
								<li><a href="javascript:void(0)" @click="pageTurning(1)">Frist</a></li>
								<li v-for="index in loadDatas.pb.totalPage" @click="pageTurning(index)"><a href="javascript:void(0)" :class="{'page-selected':index == loadDatas.pb.currentPage}">{{index}}</a></li>
								<li><a href="javascript:void(0)" @click="pageTurning(loadDatas.pb.totalPage)">Last</a></li>
								<div class="clear"> </div>
							</div>
						
						</div>
						</div>

						<!-- 添加/修改 页面开始 -->
						<div id="cover-layer" style="display: none">
							<div id="site-add-page">
								<input type="hidden" v-model="addOrEdit">
								<div style="text-align: center;">{{addOrEdit == 1 ? '添加' : '修改'}}</div>
								<table>

									<tbody>
										<caption><a href="javascript:void(0)"><img src="images/close_black.png" id="closeAddEditPage"></a></caption>
										<tr>
											<td class="tb-left">Title</td>
											<td class="tb-right"><input type="text" class="textbox" v-model="addEditdatas.title"></td>
										</tr>
										<tr>
											<td class="tb-left">Address</td>
											<td class="tb-right"><input type="text" class="textbox" v-model="addEditdatas.site"></td>
										</tr>
										<tr>
											<td class="tb-left">Description</td>
											<td class="tb-right"><textarea v-model="addEditdatas.description"></textarea></td>
										</tr>
										<tr>
											<td class="tb-left" style="line-height: 50px;">Type</td>
											<td class="tb-right" id="add-type-parent">
												<select id="add-type" align="left" v-model="addEditdatas.currentTypeId">
													<option v-for="siteType in site_types" :value="siteType.id" :key="siteType.id">{{siteType.type}}</option>
												</select>
											</td>
										</tr>
										<tr>
											<td class="tb-left"></td>
											<td><input type="button" class="button" :value="addOrEdit == 1 ? '添加' : '修改'" @click="submitWebsite"></td>
										</tr>
									</tbody>


								</table>
							</div>

						</div>
						<!-- 添加/修改 页面结束 -->
				</div>
					 <span class="bl-icon bl-icon-close" id="closeCollection"><img src="images/close_black.png"/></span>
				</section>

    <!----- End Blog Page ----------------->

           <!----- Contact Page ----------------->
				<section>
					<div class="bl-box">
						<h2>Contact</h2>
					</div>
					<div class="bl-content">
						<div class="wrap">						
						<div class="section group">
				<div class="col span_2_of_3"> 
					<h2>Get in touch</h2>
				   <div class="contact-form">				   	
					    <form method="post" action="contact-post.html">
					    	<div>
						    	<span><label>Name</label></span>
						    	<span><input name="userName" type="text" class="textbox" ></span>
						    </div>
						    <div>
						    	<span><label>E-mail</label></span>
						    	<span><input name="userEmail" type="text" class="textbox"></span>
						    </div>
						    <div>
						     	<span><label>Company Name</label></span>
						    	<span><input name="userPhone" type="text" class="textbox"></span>
						    </div>
						    <div>
						    	<span><label>Subject</label></span>
						    	<span><textarea name="userMsg"> </textarea></span>
						    </div>
						   <div>
						   		<span><input type="submit" value="Submit"  class="myButton"></span>
						  </div>
					    </form>
				  </div>
  				</div>
				<div class="col span_1_of_3">
					<div class="company_address">
				     	<h3>My Location</h3>
						    	<p>500 Lorem Ipsum Dolor Sit,</p>
						   		<p>22-56-2-9 Sit Amet, Lorem,</p>
						   		<p>USA</p>
				   		<p>Phone:(00) 222 666 444</p>
				   		<p>Fax: (000) 000 00 00 0</p>
				 	 	<p>Email: <span>info@mycompany.com</span></p>
				   		<p>Follow on: <span>Facebook</span>, <span>Twitter</span></p>
				   </div>
				 </div>
			  </div>
               </div>             
            </div>	        	
					 <span class="bl-icon bl-icon-close"><img src="images/close_black.png"></span>
				</section>
   <!----- End Contact Page ----------------->

				<!--     start login page      -->
				<section>
					<div class="bl-box">
						<h2>Admin</h2>
					</div>
					<div class="bl-content">
						<div class="wrap" id="login-page" style="color: #ffffff">
							<div v-if="userAuthority.username != null">
								{{userAuthority.username}}， 您已登录成功，欢迎~
								<br>
								<a href="#" style="color: #fff" @click="logOut">退出登录</a>
							</div>
							<!--这里是登录页面-->
							<form method="post" action="#" id="login-form" v-if="userAuthority.username == null">
								<div>
									<span><label>Username</label></span>
									<span><input name="userName" type="text" class="textbox" v-model="username"></span>
								</div>
								<div>
									<span><label>Password</label></span>
									<span><input name="password" type="password" class="textbox" v-model="password"></span>
								</div>
								<div>
									<span><input type="button" value="Login"  class="myButton" @click="loginSend"></span>
								</div>
							</form>
						</div>
					</div>
					<span class="bl-icon bl-icon-close" id="loginPageClose"><img src="images/close_black.png"></span>
				</section>
				<!--     end login page      -->
		<!-- Panel items for the works -->
				<div class="bl-panel-items" id="bl-panel-work-items">
					<div data-panel="panel-1">
						<div>
							<img src="images/1.jpg" />
							<h3>Fixie bespoke</h3>
							<p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO.Iphone artisan direct trade ethical Austin. Fixie bespoke banh mi ugh, deep v vinyl hashtag. Tumblr gentrify keffiyeh pop-up iphone twee biodiesel. Occupy american apparel freegan cliche. Mustache trust fund 8-bit jean shorts mumblecore thundercats. Pour-over small batch forage cray, banjo post-ironic flannel keffiyeh cred ethnic semiotics next level tousled fashion axe. Sustainable cardigan keytar fap bushwick bespoke.</p>
						</div>
					</div>
					<div data-panel="panel-2">
						<div>
							<img src="images/2.jpg" />
							<h3>Chillwave mustache</h3>
							<p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.</p>
						</div>
					</div>
					<div data-panel="panel-3">
						<div>
							<img src="images/3.jpg" />
							<h3>Austin hella</h3>
							<p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO.Ethical cray wayfarers leggings vice, seitan banksy small batch ethnic master cleanse. Pug chillwave etsy, scenester meh occupy blue bottle tousled blog tonx pinterest selvage mixtape swag cosby sweater. Synth tousled direct trade, hella Austin craft beer ugh chambray.</p>
						</div>
					</div>
					<div data-panel="panel-4">
						<div>
							<img src="images/4.jpg" />
							<h3>Brooklyn dreamcatcher</h3>
							<p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
						</div>
					</div>
					<div data-panel="panel-5">
						<div>
							<img src="images/5.jpg" />
							<h3>Brooklyn dreamcatcher</h3>
							<p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
						</div>
					</div>
					<div data-panel="panel-6">
						<div>
							<img src="images/6.jpg" />
							<h3>Brooklyn dreamcatcher</h3>
							<p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
						</div>
					</div>
					<div data-panel="panel-7">
						<div>
							<img src="images/7.jpg" />
							<h3>Brooklyn dreamcatcher</h3>
							<p>Squid vinyl scenester literally pug, hashtag tofu try-hard typewriter polaroid craft beer mlkshk cardigan photo booth PBR. Chillwave 90's gentrify american apparel carles disrupt. Pinterest semiotics single-origin coffee craft beer thundercats irony, tumblr bushwick intelligentsia pickled. Narwhal mustache godard master cleanse street art, occupy ugh selfies put a bird on it cray salvia four loko gluten-free shoreditch.Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
						</div>
					</div>	
					<div data-panel="panel-8">
						<div>
							<img src="images/8.jpg" />
							<h3>Brooklyn dreamcatcher</h3>
							<p>Fashion axe 90's pug fap. Blog wayfarers brooklyn dreamcatcher, bicycle rights retro YOLO. Wes anderson lomo 90's food truck 3 wolf moon, twee jean shorts. Iphone small batch twee wolf yr before they sold out. Brooklyn echo park cred, portland pug selvage flannel seitan tousled mcsweeney's.</p>
						</div>
					</div>				
					<nav>
						<span class="bl-next-work">&gt; Next Project</span>
						<span class="bl-icon bl-icon-close"><img src="images/close-button.png" alt="" /></span>
					</nav>
				</div>
			</div>	
			 <!--<div class="copy_right">
						<p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://guantaow.taobao.com/">厚朴网络淘宝店</a><a target="_blank" href="http://www.moobnn.com">网页模板</a></p>
		   		</div>	-->
		</div><!-- /container -->		
		<script src="js/boxlayout.js"></script>
		<script>
			$(function() {
				Boxlayout.init();
			});
		</script>
	 <script src="js/loaddata.js"></script>
	</body>
</html>

